<template>
  <div class="Reports">
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
      <div id="box1"></div>
    </el-card>
  </div>
</template>
<script>
import { geReports } from "../utils/http";
export default {
  created() {
    this.getData();
  },
  methods: {
    getData() {
      geReports().then((res) => {
        console.log(res);
        var chartDom = document.getElementById("box1");
        var myChart = this.$echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: "用户来源",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#E9EEF3",
              },
            },
          },
          legend: {
            data: res.data.legend.data,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: res.data.xAxis[0].data,
          },
          yAxis: res.data.yAxis,
          series: res.data.series,
        };
        option && myChart.setOption(option);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-breadcrumb {
  margin-bottom: 20px;
}
#box1 {
  width: 800px;
  height: 440px;
}
</style>